<template>
    <div class="el-menu">
        <ul class="el-menu-ul">
            <router-link v-for="(item,index) in menuName" :key="index" :to="item.url">
                <li class="el-menu-li" @click="menuIndex">
                    
                        <img class="el-menu-icon" :src="item.icon" alt="">
                        <p>{{item.name}}</p>
                    
                </li>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    name:'Menu',
    data(){
        return{
            menuName:[{
                name:'物料接收',
                icon:'./img/materialReceiving.png',
                url:'/materialReceipt'
            },{
                name:'分拣配套',
                icon:'./img/sortingMatching.png',
                url:'/sortingMatching'
            },{
                name:'物料配送',
                icon:'./img/materialDistribution.png',
                url:'/MainMaterialDistribution'
            },{
                name:'库存管理',
                icon:'./img/inventoryManagement.png',
                url:'/inventoryManagement'
            },{
                name:'运行监控',
                icon:'./img/operationMonitoring.png',
                url:'operationMonitoring'
            },{
                name:'系统配置',
                icon:'./img/systemConfiguration.png',
                url:'/system'
            }]
        }
    },
    methods:{
        menuIndex(){
            sessionStorage.setItem('listNumber','1')
        }
    },
    mounted(){
        var time = new Date()
        var nowTime=  time.getFullYear() + "-" + (time.getMonth() + 1) + "-" +  time.getDate() + ' '+ time.getHours() + ':' + time.getMinutes() + ':' +time.getSeconds();
        console.log(nowTime);
 
    }
}
</script>
<style scoped>
*{
    border: none;
}
.el-menu {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-width: 1124px;
    background-image: url(../../../public/img/loginBj.png);
    background-size: 100% 100%;
       
    
}
.el-menu-ul {
    width: 60%;
    position: absolute;
    top: 65%;
    left: 20%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    
} 
.el-menu-icon {
    width: 60px;
    height: 60px;
}
.el-menu-li {
    color: white;
}

</style>